<template>
	<view>
		<view class="top">
			<image src="../../static/indexImage/logo.png" mode="" class="logo"></image>
			<u-search placeholder="搜索商品" v-model="goodsTitle" :show-action="false" @search="search"></u-search>
		</view>
		<view class="swiper_box"><u-swiper :list="bannerList" name="f_pic2" height="300"></u-swiper></view>
		<navigator url="../lastestNotice/lastestNotice" hover-class="none">
			<view class="notice_box">
				<image src="../../static/indexImage/notice.png" mode=""></image>
				<view class="notice">
					<u-notice-bar type="none" mode="vertical" :list="noticeList" :volume-icon="false" font-size="28" padding="0"></u-notice-bar>
				</view>
			</view>
		</navigator>
		<view class="type_box">
			<view v-for="(item, index) in typeList" :key="index">
				<view class="item_box" :id="item.title" @click="toTypeDetail">
					<image :src="item.imgUrl" mode="" class="type_icon"></image>
					<text>{{ item.title }}</text>
				</view>
			</view>
		</view>
		<view class="headline">
			<text class="title_box">推荐项目</text>
			<view class="see_more" @click="toProject">查看更多</view>
		</view>
		<view class="project_list">
			<view v-for="(item, index) in projectList" :key="index">
				<view class="project_item" :id="item.f_id" @click="projectDetail">
					<image :src="item.f_pic1" mode="" class="project_img"></image>
					<view class="project_info">
						<view class="project_title">
							<text>{{ item.f_name }}</text>
							<text class="price">￥{{ item.f_investment }}/份</text>
						</view>
						<view class="director">导演：{{ item.f_director }}</view>
						<view class="introduce">{{ item.f_description }}</view>
						<view class="sale_box">
							<u-line-progress
								:active-color="item.f_progress >= 100 ? '#D5D6DC' : '#EC5F58'"
								:percent="item.f_progress"
								width="247"
								inactive-color="#FFEBEA"
								:show-percent="false"
								height="34"
							></u-line-progress>
							<view class="sale_number" :style="'color:' + (item.f_progress >= 100 ? '#D5D6DC' : '#F1736D')">
								{{ item.f_progress >= 100 ? '已售罄' : '已售' + item.f_progress + '%' }}
							</view>
						</view> 
					</view>
				</view>
			</view>
		</view>
		<view class="headline"><text class="title_box">投资顾问</text></view>
		<view class="adviser_box">
			<scroll-view scroll-x="true" show-scrollbar="false">
				<view class="adviser" v-for="(item, index) in adviserList" :key="index">
					<view class="adviser_top">
						<view class="adviser_left">
							<text class="name">{{ item.a_name }}</text>
							<text class="job">{{item.a_title}}</text>
						</view>
						<u-avatar :src="item.a_pic" size="80"></u-avatar>
					</view>
					<view class="btn_box"><u-button size="mini" class="btn-style" hover-class="none" :hair-line="false">立即约见</u-button></view>
				</view>
			</scroll-view>
		</view>
		<view class="headline">
			<text class="title_box">新闻资讯</text>
			<view class="see_more" @click="toNews">查看更多</view>
		</view>
		<view class="news_list">
			<view v-for="(item, index) in newsList" :key="index" class="news_item" @click="newsDetail(item.a_id)">
				<view class="news_left">
					<view class="title">{{ item.a_title }}</view>
					<view class="date">{{ item.a_addtime }}</view>
				</view>
				<image :src="item.a_pic" mode=""></image>
			</view>
		</view>
		<text class="title_box">安全保障</text>
		<view class="save_box">
			<u-waterfall v-model="saveList">
				<template v-slot:left="{ leftList }">
					<view v-for="(item, index) in leftList" :key="index" class="save_item">
						<view class="title">{{ item.title }}</view>
						<text class="content">{{ item.content }}</text>
					</view>
				</template>
				<template v-slot:right="{ rightList }">
					<view v-for="(item, index) in rightList" :key="index" class="save_item">
						<view class="title">{{ item.title }}</view>
						<text class="content">{{ item.content }}</text>
					</view>
				</template>
			</u-waterfall>
		</view>
		<text class="title_box">合作伙伴</text>
		<view class="partner_box">
			<view v-for="(item, index) in partnerList" :key="index"><image :src="item.l_pic" mode=""></image></view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			goodsTitle: '',
			bannerList: [],
			typeList: [
				{
					imgUrl: '../../static/indexImage/film.png',
					title: '影视项目'
				},
				{
					imgUrl: '../../static/indexImage/news.png',
					title: '影视资讯'
				},
				{
					imgUrl: '../../static/indexImage/zhinanzhen.png',
					title: '投资指南'
				},
				{
					imgUrl: '../../static/indexImage/about.png',
					title: '关于我们'
				}
			],
			projectList: [],
			adviserList: [],
			newsList: [],
			flowList: [],
			saveList: [
				{
					title: '项目筛选',
					content: '投资团队收集提取优质项'
				},
				{
					title: '技术安全',
					content: '基于阿里云自主开发平台 ，加密https传输。敏感 信息加密存储'
				},
				{
					title: '资金安全',
					content: '投资资金直接入款影视出 品方企业账户'
				},
				{
					title: '信息安全',
					content: '对您的隐私信息进行严格 保护 投资者注册信息、账 户交易信息等都将进行加 密处理，不会被不法分子 窃取 我们绝对不会将您的 账'
				},
				{
					title: '实力背景',
					content: '北大QP投资联盟会员单位 、中国投资联盟会员单位 、中国投资实力荣誉单位 、中国中小企业协助成长 单位，电影资者之家会员'
				}
			],
			partnerList: [],
			noticeList: []
		};
	},
	onLoad() {},
	onShow() {
		this.$http.post('Index/index').then(async res => {
			console.log(res.data)
			let {banner, notice, adviser, article, link, film} = await res.data
			this.bannerList = banner
			notice.map(item => {
				this.noticeList.push(item.n_title)
			})
			this.projectList = film
			this.adviserList = adviser
			this.newsList = article
			this.partnerList = link
		})
	},
	methods: {
		// 搜索商品
		search() {
			console.log(this.goodsTitle);
			uni.navigateTo({
				url: '../search/search?val=' + this.goodsTitle
			});
		},
		// 菜单
		toTypeDetail(e) {
			let id = e.currentTarget.id;
			switch (id) {
				case '影视项目':
					uni.switchTab({
						url: '../project/project'
					});
					break;
				case '影视资讯':
					uni.switchTab({
						url: '../news/news'
					});
					break;
				case '投资指南':
					uni.switchTab({
						url: '../guide/guide'
					});
					break;
				case '关于我们':
					uni.navigateTo({
						url: '../aboutUs/aboutUs'
					});
					break;
			}
		},
		// 推荐项目详情
		projectDetail(e) {
			console.log(e.currentTarget.id);
			uni.navigateTo({
				url: `../projectDetail/projectDetail?id=${e.currentTarget.id}`
			})
		},
		toProject() {
			uni.switchTab({
				url: '../project/project'
			})
		},
		toNews() {
			uni.switchTab({
				url: '../news/news'
			})
		},
		newsDetail(id) {
			uni.navigateTo({
				url: '../newsDetail/newsDetail?id=' + id
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 25upx 0;
	.logo {
		width: 71upx;
		height: 50upx;
		margin-right: 40upx;
	}
}
.swiper_box {
	width: 100%;
	height: 300upx;
	border-radius: 10upx;
}

.notice_box {
	display: flex;
	align-items: center;
	padding: 40upx 0;
	image {
		width: 172upx;
		height: 32upx;
	}
	.notice {
		flex: 1;
	}
}

.type_box {
	display: flex;
	justify-content: space-between;
	margin-bottom: 40upx;
	.item_box {
		display: flex;
		justify-content: center;
		flex-direction: column;
		text {
			font-size: 24upx;
		}
	}
	.type_icon {
		width: 80upx;
		height: 80upx;
		display: block;
		margin: 0 auto 20upx auto;
	}
}

.headline {
	display: flex;
	justify-content: space-between;
	align-items: center;
	.title_box {
		font-size: 32upx;
		position: relative;
		&::after {
			content: '';
			display: block;
			width: 100%;
			height: 12upx;
			background: $red;
			border-radius: 17upx;
			opacity: 0.8;
			position: absolute;
			bottom: -2upx;
		}
	}
}

.project_list {
	padding: 35upx 0;
}

.project_item {
	display: flex;
	margin-bottom: 30upx;
	.project_img {
		width: 230upx;
		height: 300upx;
		border-radius: 15upx;
		margin-right: 20upx;
	}

	.project_info {
		width: 100%;
		flex: 1;
		.project_title {
			font-size: 32upx;
			margin-bottom: 30upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.price {
				color: $red;
				font-weight: bold;
				font-size: 34upx;
			}
		}
		.director,
		.introduce {
			font-size: 30upx;
			color: $color-666;
			margin-bottom: 30upx;
		}
		.introduce {
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2; /*这里填入需要几行省略*/
			overflow: hidden;
			line-height: 40upx;
		}
		.sale_box {
			display: flex;
			align-items: center;
			width: 100%;
			.sale_number {
				flex: 1;
				margin-left: 20upx;
				white-space: nowrap;
				font-size: 26upx;
			}
		}
		.recommend_box {
			display: flex;
			align-items: center;
			text {
				font-size: 26upx;
			}
		}
	}
}
.see_more {
	text-align: center;
	color: #373846;
	font-size: 25upx;
	padding: 8upx;
}

.adviser_box {
	padding-top: 30upx;
	padding-bottom: 40upx;
	scroll-view {
		width: 100%;
		white-space: nowrap;
		&::-webkit-scrollbar {
			width: 0;
			height: 0;
			background-color: transparent;
		}
		.adviser {
			padding: 20upx;
			width: 330upx;
			height: 190upx;
			background: url(../../static/indexImage/13.png) no-repeat;
			background-size: 100% 100%;
			margin-right: 20upx;
			display: inline-block;
			.adviser_top {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 15upx;
				.adviser_left {
					text {
						display: block;
					}
					.name {
						font-size: 30upx;
						margin-bottom: 20upx;
					}
					.job {
						font-size: 26upx;
						color: $color-666;
					}
				}
			}
		}
	}
}

.btn_box {
	text-align: center;
	.btn-style {
		color: $red;
		border: none;
	}
}

.adviser_type {
	display: flex;
	justify-content: space-around;
	margin-bottom: 40upx;
	.item_box {
		display: flex;
		justify-content: center;
		flex-direction: column;
		text {
			font-size: 24upx;
			text-align: center;
		}
	}
	.type_icon {
		width: 74upx;
		height: 74upx;
		margin: 0 auto;
	}
}

.news_list {
	padding: 35upx 0;
	.news_item {
		display: flex;
		margin-bottom: 30upx;
		position: relative;
		image {
			width: 225upx;
			height: 147upx;
			margin-left: 30upx;
		}
		.news_left {
			flex: 1;
		}
		.title {
			font-size: 32upx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
		}
		.date {
			position: absolute;
			bottom: 0;
			font-size: 24upx;
			color: $color-999;
		}
	}
	.btn_box {
		margin-top: 40upx;
	}
}

.success_box {
	padding: 30upx 0;
	display: flex;
	align-items: center;
	image {
		width: 340upx;
		height: 440upx;
		margin-right: 23upx;
		border-radius: 10upx;
	}
	.success_info {
		flex: 1;
		.title {
			font-size: 32upx;
			margin: 20upx 0 20upx 20upx;
		}
		.info_item {
			display: flex;
			margin-bottom: 20upx;
			font-size: 26upx;
			align-items: center;
			image {
				width: 40upx;
				height: 40upx;
				margin: 15upx;
			}
			.number {
				color: $red;
			}
		}
	}
}

.save_box {
	padding: 30upx 0;
	.save_item {
		box-shadow: 0px 0px 10upx 0px rgba(11, 4, 7, 0.15);
		border-radius: 10upx;
		padding: 15upx;
		margin: 6upx;
		.title {
			font-size: 32upx;
			margin-bottom: 15upx;
		}
		.content {
			font-size: 28upx;
			color: $color-999;
		}
	}
}

.partner_box {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 30upx 0;
	image {
		width: 215upx;
		height: 121upx;
		box-shadow: 0px 0px 10upx 0px rgba(11, 4, 7, 0.15);
		border-radius: 10upx;
		margin-bottom: 20upx;
	}
}
</style>

<style>
page {
	padding: 0 30upx;
	padding-top: 70upx;
}
</style>
